<script setup lang="ts">
import {Button, message, Modal} from 'ant-design-vue';

import {Page} from '#/components/common-ui';
import {useVxeGrid} from '#/ui-kit';
import {findOnlineListPage, forcedOffline} from '#/api/system/monitor';

const [Grid, gridApi] = useVxeGrid({
  tableTitle: '会话列表',
  gridOptions: {
    columns: [
      {fixed: 'left', title: '#', type: 'seq', minWidth: 50},
      {fixed: 'left', field: 'username', title: '用户账号', minWidth: 120,},
      {field: 'nickname', title: '用户姓名', minWidth: 120,},
      {
        field: 'ip', title: 'IP 地址', minWidth: 120, formatter: ({cellValue}) => {
          return cellValue ? cellValue : '-';
        }
      },
      {
        field: 'os', title: '操作系统', minWidth: 120, formatter: ({cellValue}) => {
          return cellValue ? cellValue : '-';
        }
      },
      {
        field: 'browser', title: '浏览器', minWidth: 120, formatter: ({cellValue}) => {
          return cellValue ? cellValue : '-';
        }
      },
      {field: 'loginTime', title: '登录时间', formatter: 'formatDateTime', minWidth: 180,},
      {field: 'expireTime', title: '失效时间', formatter: 'formatDateTime', minWidth: 180,},
      {fixed: 'right', slots: {default: 'action'}, title: '操作', minWidth: 120,},
    ],
    proxyConfig: {
      ajax: {
        query: async ({page}, formValues) => {
          return await getOnlineListPage({
            pageNumber: page.currentPage,
            pageSize: page.pageSize,
            ...formValues
          });
        },
      }
    },
    keepSource: true,
    height: 'auto',
    toolbarConfig: {
      custom: true,
      refresh: true,
      zoom: true,
    },
  },
  formOptions: {
    commonConfig: {
      componentProps: {
        allowClear: true,
      },
    },
    schema: [
      {
        label: '用户账号',
        fieldName: 'username',
        component: 'Input',
        componentProps: {
          placeholder: '请输入用户账号',
        },
      },
      {
        label: '用户姓名',
        fieldName: 'nickname',
        component: 'Input',
        componentProps: {
          placeholder: '请输入用户姓名',
        },
      },
      {
        label: 'IP 地址',
        fieldName: 'ip',
        component: 'Input',
        componentProps: {
          placeholder: '请输入IP 地址',
        },
      },
    ],
    showCollapseButton: true,
    collapsed: true,
  }
});

const getOnlineListPage = (params) => {
  return new Promise<{ items: any; total: number }>((resolve) => {
    findOnlineListPage(params).then(res => {
      resolve({
        items: res.records,
        total: res.totalRow,
      });
    }).catch(() => {
      resolve({
        items: [],
        total: 0,
      });
    })
  });
}

const handleForcedOffline = (row) => {
  Modal.confirm({
    title: '提示',
    content: '是否为此会话用户进行强制下线',
    centered: true,
    async onOk() {
      await forcedOffline(row.token).then(() => {
        gridApi.reload();
        message.success('强制下线成功');
      });
    }
  });
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #action="{row}">
        <Button type="link" size="small" v-access:code="['sys:session:forced-offline']"
                @click="handleForcedOffline(row)">强制下线
        </Button>
      </template>
    </Grid>
  </Page>
</template>